<template>
	<view class="page">
		<view class="top">
			<view class="title">
				标题
			</view>
			<view class="u_input">
				<u-input class="input" v-model="title" type="type" :border="border" placeholder-style="color: #FFD4A5" 
					border-color="#FFD4A5" clearable="true"/>
			</view>
		</view>
		<view class="content">
			<view class="content_title">
				内容
			</view>
			<scroll-view class="wrap_right_bottom_scroll" :scroll-top="scrollTop" scroll-y="true" @scroll="scroll" scroll-with-animation="true">
				<view class="u_inputTwo">
					<u-input class="input" type="textarea" v-model="conent" :border="border" placeholder-style="color: #FFD4A5" border="true" 
						border-color="#FFD4A5"  height="430" clearable="true" maxlength="90000"/>
				</view>
			</scroll-view >	
		</view>
		<view class="image">
			<view class="img_name">
				图片
			</view>
			<!-- <view class="upload">
				<u-upload  :action="action" name="photo" :show-tips="false" max-count="1" :show-progress="false" @on-remove="onRemove"></u-upload>
			</view> -->
			<view class="uploadTwo">
				<view style="margin: 10rpx;" v-for="(item,index) in fileListImg" :key="index">
					<image class="del-icon" @click="del_img(index)" mode="widthFix" src="../../static/img/del_icon.png" />
					<image class="pushImg" :src="item.img_url" mode="" @click="previewImg(index)"></image>
				</view>
					
				<view class="iconn" @click="uploadFileForImg" v-if="fileListImg.length!=1">
					<u-icon name="plus"></u-icon>
				</view>
			</view>
		</view>
		<view class="tip">
			提示：如有复杂操作，请在后台操作
		</view>
		<view class="bottom" @click="setContent">
		  <view class="bottom_but">
		    <span class="bottom_but_text">确定</span>
		  </view>
		</view>
	</view>
</template>

<script>
	import {UPLOAD_IMG, UPLOAD_VIDEO} from "../../api";
export default{
	name:'addContent',
	data(){
		return{
			content_id:'',
			title:'',
			conent:'',
			value:'',
			autoHeight: true,
			scrollTop: 0,
			old: {
				scrollTop: 0
			},
			action: '',
			fileList: [],
			imgFileList:[],
			fileListImg:[],
			uploadUrl: UPLOAD_IMG,
      imageId:''
		}
	},
	onLoad(options) {
		this.content_id = options.content_id
		this.getCommunityContent(options.content_id)
	},
	mounted() {
		
	},
	methods:{
		async getCommunityContent(content_id){
			const res = await this.$api.getCommunityContent({
				'content_id':content_id,
				'login_token':uni.getStorageSync('loginToken'),
			})
			this.title = res.data.data.title
			this.conent = res.data.data.content
			if(res.data.data.image_url!=''){
				this.fileListImg.push({img_url:res.data.data.image_url,image_id:res.data.data.image_id})
			}else{
				this.fileListImg.push()
			}
			if(res.data.level != 'success'){
				uni.showToast({
				  title:res.data.data.message,
				  icon:'none'
				})
			}
		},
		scroll(e) {
			this.old.scrollTop = e.detail.scrollTop
		},
    beforeUpload(index,list){
      console.log(list)
      // let _this = this

      uni.uploadFile({
        url: 'https://zddxapi.rzkeji.com/api/file/upload-img',// api地址
        filePath: list[index].url, // 本地上传完成后的路径
        name: 'photo', // 默认
        header: {
          "Content-Type": "multipart/form-data", // formdata提交格式
        },
        // formData: {
        //   fileType: '2',
        //   fileContainerName: 'default'
        // },
        success: function(uploadFileRes) {
          // console.log('success', JSON.parse(uploadFileRes.data));
          let res = JSON.parse(uploadFileRes.data);
          this.imageId = res.data.id
        }
      });
    },
    // onRemove(data, lists){
    //   if(lists.length <= 0 ){
    //     this.imageId = ""
    //   }
    // },
    async setContent(){
		let imgidData = []
		this.fileListImg.forEach(item =>{
			imgidData.push(item.image_id)
		})
		let imageId = imgidData.join(",")
		console.log(imageId,'11')
      let params={
        "login_token":uni.getStorageSync('loginToken'),
        "title":this.title,
        "content":this.conent,
        "image_id":imageId,
		'community_id':this.content_id
      }

      let res=await this.$api.addCommunityContent(params)
      if(res.data.level == "success"){
        uni.showToast({
          title: '设置成功！',
          duration: 2000,
        });
        setTimeout(() =>{
          uni.navigateTo({
            url:'/pages/contentPreview/preview?model_type=community'
          });
        },2100)

      }else{
        uni.showToast({
          title:res.data.message,
          icon:'none'
        })
      }
    },
	//删除图片
	del_img(index){
		this.fileListImg.splice(index, 1);
		console.log(this.fileListImg,'77')
	},
	// 预览图片
	previewImg(index) {
	    const currentUrl = this.fileListImg[index].img_url;
			const urls = this.fileListImg.map(item => {
				return item.img_url
			});
	    wx.previewImage({
				current: currentUrl,
				urls: urls,
	    })
	},
	uploadFileForImg() {
	
		wx.chooseMedia({
			count: 1,
			mediaType: ["image"],
			sourceType: ["album", "camera"],
			camera: "back",
			maxDuration: 60,
			sizeType: [],
			success: res => {
				const _fileList = res.tempFiles;
				this.imgFileList.push(..._fileList);
	
				for (let item of _fileList.values()) {
					item.fileType = res.type;
					item.progress = 0;
					item.showProgress = true;
					let apiURL, params;
					apiURL = this.uploadUrl;
					params = "photo"
	
					const uploadTask = wx.uploadFile({
						url: this.uploadUrl,
						filePath: item.tempFilePath,
						name: params,
						success: async res => {
							const data = JSON.parse(res.data);
							data.data.fileType = item.fileType;
							data.data.time = 0;
							console.log(data.data,'图片')
							this.fileListImg.push({img_url:data.data.img_url,image_id:data.data.id})
							this.imgFileList.push(data.data);
						},
						fail: err => {
							console.log(err)
						}
					})
					uploadTask.onProgressUpdate(res => {
						item.progress = res.progress;
						if (item.progress === 100) {
							item.showProgress = false;
						}
					})
				}
			},
			fail: err => {
				console.log(err);
			}
		})
	
	},
	}
}
</script>

<style scoped lang="scss">
	.page{
		background-color: #fdc986;
		min-height: 100vh;
		overflow: hidden;
	}
	.top{
		height: 150rpx;
		background-color: #7F090B;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.title{
		color: #FFD4A5;
		width: 10%;
		font-size: 35rpx;
		font-weight: 500;
	}
	.u_input{
		background-color: #7F090B;
		width: 70%;
		margin-left: 50rpx;
		
	}
	
	.u_input{
		 /deep/ .input{
			.u-input__input{
				color: #FFD4A5 !important;
			}
		}
		
	}
	.content{
		margin-top: 20rpx;
		padding-top: 20rpx;
		height: 500rpx;
		background-color: #7F090B;
		display: flex;
		justify-content: center;
	}
	.u_inputTwo{
		background-color: #7F090B;
		width: 91%;
		margin-left: 50rpx;
	}
	.content_title{
		color: #FFD4A5;
		width: 10%;
		font-size: 35rpx;
		font-weight: 500;
		margin-top: 20rpx;
	}
	
	.u_inputTwo{
		 /deep/ .input{
			.u-input__input{
				color: #FFD4A5 !important;
			}
		}
		
	}
	.wrap_right_bottom_scroll{
		width: 77%;
	}
	.image{
		background-color: #7F090B;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		// height: 250rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.img_name{
		color: #FFD4A5;
		font-size: 35rpx;
		font-weight: 500;
		width: 22%;
		text-align: center;
		margin-top: -150rpx;
	}
	/deep/.u-list-item.data-v-49deb6f2 {
		background-color: #EBB27F;
	}
	/deep/.u-icon__icon{
		color: #7F090B;
	}
	/deep/.u-add-tips{
		color: #7F090B;
	}
	/deep/.u-preview-image{
		
	}
	.upload{
		// width: 20%;
	}
	.tip{
		margin-top: 50rpx;
		font-size: 28rpx;
		margin-left: 30rpx;
		color: #AC3D27;
	}
	.bottom{
	  background-color: #FFC18A;
	  // border-top: #93110A solid 1rpx;
	  position: fixed;
	  bottom: 0;
	  // left: 0;
	  height: 130rpx;
	  width: 100vw;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	.bottom_but{
	  background-image: url(../../static/img/login_imgTwo.png);
	  background-repeat: no-repeat;
	  height: 100rpx;
	  background-size: 100% 100%;
	  width: 90%;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  color: #FFC695;
	}
	.uploadTwo{
		margin-top: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: flex-start;
		flex-wrap:wrap;
	}
	.del-icon {
	    position: absolute;
	    z-index: 99;
	    width: 35rpx;
		margin-left: 150rpx;
		margin-top: 15rpx;
	}
	.pushImg{
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
	}
	.iconn{
		width: 200rpx;
		height: 200rpx;
		border-radius: 10rpx;
		margin: 10rpx;
		background-color: #FFC18A;
		display: flex;
		// flex-direction: column;
		justify-content: center;
		align-items: center;
		line-height: 80rpx;
		font-size: 40rpx;
	}
</style>
